<template>
    <div class="page-wrap">
        <el-card class="mb-2" shadow="hover">
            <div class="panel-content flex items-center">
                <div class="left-content flex items-center">
                    <el-avatar class="avatar" :src="defaultAvatar" />
                    <div class="welcome-info">
                        <span class="login-user">{{ welcomeTime }}{{ userInfo.name }} ，祝你开心每一天！</span>
                        <span class="welcome-sys">欢迎使用 <el-tag size="mini">工作台</el-tag></span>
                    </div>
                </div>
                <div class="right-content flex items-center">
                    <div class="week">
                        <span class="week-txt">{{ weekStr }}</span>
                        <span class="week-date">{{ todayStr }}</span>
                    </div>
                    <div class="weather">
                        <div id="he-plugin-simple"></div>
                    </div>
                </div>
            </div>
        </el-card>
        <el-row :gutter="15">
            <el-col :md="24" :lg="16">
                <List />
            </el-col>

            <el-col :md="24" :lg="8">
                <el-card shadow="hover" class="mb-2">
                    <template #header>
                        <div class="card-header flex justify-between items-center">
                            <span>快速开始</span>
                        </div>
                    </template>
                    <div class="flex flex-wrap">

                    </div>
                </el-card>

                <!-- <Chart /> -->
            </el-col>
        </el-row>
    </div>
</template>
<script setup name="home">
import defaultAvatar from '@/assets/images/default-avatar.png'
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import useToday from '@/hooks/useToday'
import List from './components/List.vue'
const userStore = useUserStore()
const userInfo = userStore.userInfo

const { welcomeTime, weekStr, todayStr } = useToday()

const getWeather = () => {
    window.WIDGET = {
        CONFIG: {
            modules: '02',
            background: '2',
            tmpColor: '567EF4',
            tmpSize: '20',
            cityColor: 'FFFFFF',
            citySize: '16',
            aqiColor: 'FFFFFF',
            aqiSize: '16',
            weatherIconSize: '32',
            alertIconSize: '18',
            padding: '10px 10px 10px 10px',
            shadow: '0',
            language: 'auto',
            fixed: 'false',
            vertical: 'top',
            horizontal: 'left',
            key: '5f9e448d7c584ff2bb3f7b271694fcbb'
        }
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0'
    document.getElementsByTagName('head')[0].appendChild(script)
}
getWeather()
</script>

<style lang="scss" scoped>
.page-wrap {
    width: 100%;
    height: 100%;
}
.welcome-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 8px;
    .login-user {
        font-size: 18px;
    }
    .welcome-sys {
        margin-top: 8px;
        i {
            font-style: normal;
            color: var(--welcome-blue-color);
        }
    }
}

.right-content {
    margin-left: auto;
}

.week {
    color: #567df4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .week-txt {
        font-size: 20px;
        color: var(--welcome-blue-color);
        margin-bottom: 8px;
    }
    .week-date {
        font-size: 12px;
        color: var(--welcome-gray-text-color);
    }
}
.weather {
    position: relative;
    overflow: hidden;
}
</style>
